<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>面板示例</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/hisui.min.css">
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../../dist/js/jquery.hisui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script src="../jquery-tag-demo.js" type="text/javascript"></script>
</head>
<body>
	<h2>日期框</h2>
	<h3>说明:</h3>
    <span>日期框（datebox）把可编辑的文本框和下拉日历面板结合起来，用户可以从下拉日历面板中选择日期，在文本框中输入的字符串可转换为有效日期。</span>
	<h3>如：</h3>
	<div class="demo-exp-code entry-content">
		<table cellpadding="5"> 
				<tr>
					<td>生日:</td>
					<td>
						<input id="db" class="hisui-datebox textbox" data-options="onSelect:onSelect"></input>
						<!-- <a id="btn1" class="hisui-linkbutton">sure</a> -->
					</td>
				</tr>
		</table>
		<div style="margin:10px 0">
			<span>Selected Date: </span>
			<span id="result"></span>
		</div>
		<pre class="prettyprint lang-html"><code>&lt;table cellpadding="5"> 
	&lt;tr>
		&lt;td>生日:&lt;/td>
		&lt;td>
			&lt;input id="db" class="hisui-datebox textbox" data-options="onSelect:onSelect">&lt;/input>
		&lt;/td>
	&lt;/tr>
&lt;/table&gt;
&lt;div style="margin:10px 0">
	&lt;span>Selected Date: &lt;/span>
	&lt;span id="result">&lt;/span>
&lt;/div></code></pre><pre class="prettyprint lang-js">
&lt;script type="text/javascript"&gt;
function onSelect(date){
	$('#result').text(date)
}
&lt;/script&gt;	
	</pre>

	</div>
	<script>
		function onSelect(date){
			$('#result').text(date)
		}
	</script>
 <script type="text/javascript">
// 	var init = function () {
// 		$("#btn1").click(function(){
// 			var valbox = $HUI.datebox("#db");
// 			var val = valbox.getValue();
// 			alert(val);
// 		});

// 	}	
//  	$(init);
</script>	
<prettyprint/>
</body>
</html>